<%@ Page Title="" Language="C#" MasterPageFile="~/Themes/Default/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="MvcContrib.UI.Html" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	<%=Html.Resource("Role","ROLEMANGEMENT")%>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2><%=Html.Resource("Role","ROLEMANGEMENT")%></h2>
    <div class="tabcontainer">
    <div id="searchTabs">
    <ul>
        <li><a href="#basicSearch"><span><%=Html.Resource("Global","Search") %></span></a></li>
    </ul>
        <div id="basicSearch" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        </div>
    </div>
</div>
    <div class="tabcontainer">
    <input type="submit" value="<% =Html.Resource("Global","Search") %>" name="btnSubmit" class="button" id="btnSubmit"/>
    <input type="button" value="<% =Html.Resource("Global","CLEAR") %>" name="btnClear" class="button" id="btnClear"/>
    </div>
<div class="tabcontainer">
    <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
    <div id="pager" class="scroll" style="text-align:center;"></div>
</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">	
        <%=Html.Stylesheet("~/Content/jgGrid/ui.jqgrid.css")%>
	    <%=Html.ScriptInclude("~/Scripts/jgGrid/i18n/grid.locale-"+Html.GetjqGridCulture()+".js")%>
        <%=Html.ScriptInclude("~/Scripts/jgGrid/jquery.jqGrid.min.js")%>
   </asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="PostScript" runat="server">
<script type="text/javascript">
    $(document).ready(function() {
        jQuery("#list").jqGrid({
            url: '/Role/ListData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID', '<% =Html.Resource("Role","ROLENAME") %>', '<% =Html.Resource("Global","DESCRIPTION") %>'],
            colModel: [
          { name: 'id', index: 'id', hidden: true },
          { name: 'rolename', index: 'rolename', width: 100, align: 'left' },
          { name: 'description', index: 'description', width: 300, align: 'left' }],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'rolename',
            sortorder: "asc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: '',
            hidegrid: true,
            //width: 700,
            autowidth: true,
            height: 200,
            multiselect: true,
            editurl: '/Role/Edit/'
        }).navGrid('#pager', {
            refresh: true,
            edit: false,
            add: false,
            del: true,
            search: false
        },
            {}, // edit parameters
	        {}, // add parameters
	        {reloadAfterSubmit: true, url: '/Role/Delete'} //delete parameters
        ).navButtonAdd('#pager', {
            caption: "",
            title: '<%=Html.Resource("Role","EDITSELECTEDROLE") %>',
            buttonicon: "ui-icon-pencil",
            onClickButton: function() {
                var id = jQuery("#list").getGridParam('selrow');
                if (id) {
                    var row = jQuery("#list").getRowData(id);
                    redirectToAction('Role', 'Edit', row.id);
                }
            },
            position: "first"
        }).navButtonAdd('#pager', {
            caption: "",
            title: '<%=Html.Resource("Role","CREATEROLE") %>',
            buttonicon: "ui-icon-plus",
            onClickButton: function() {
                redirectToAction('Role', 'Create');
            },
            position: "first"
        });

        //initialize search buttons
        var sg = jQuery("#basicSearch").filterGrid("list",
        	{
        	    gridModel: false,
        	    enableSearch: false,
        	    enableClear: false,
        	    autosearch: false,
        	    formtype: 'vertical',
        	    filterModel: [{
        	        label: '<% =Html.Resource("Role","ROLENAME") %>',
        	        name: 'roleName',
        	        stype: 'text'
        	    }
        		    ]
        	})[0];
        jQuery("#basicSearch input").addClass("button normalinput");
        jQuery("#basicSearch td").each(function(index) {
            if (index % 2 == 0)
                jQuery(this).css("width", "18%");
            else
                jQuery(this).css("width", "82%");
        })

        jQuery("#btnSubmit").click(function() {
            sg.triggerSearch();
        });
        jQuery("#btnClear").click(function() {
            sg.clearSearch();
        });

        //intialize search tab
        $("#searchTabs").tabs();

    });
</script>
</asp:Content>
